<template>
  <div>
    <el-card shadow="hover" style="margin-bottom: 20px">
      <div class="flex-warp">
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-input placeholder="请输入考试名称"
                      size="small"
                      suffix-icon="el-icon-search"
                      v-model="listQueryParam.examName"
            >
            </el-input>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-input placeholder="请输入老师姓名"
                      size="small"
                      suffix-icon="el-icon-search"
                      v-model="listQueryParam.name"
            >
            </el-input>
          </div>
        </div>
        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button size="small"
                       icon="el-icon-search"
                       @click="search"
            >搜索
            </el-button>
          </div>
        </div>

        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="primary"
                       size="small"
                       icon="el-icon-refresh-right"
                       @click="refresh"
            >刷新
            </el-button>
          </div>
        </div>

        <div class="flex-warp-item">
          <div class="flex-warp-item-box">
            <el-button type="danger"
                       size="small"
                       icon="el-icon-folder-delete"
                       @click="batchDel"
            >删除
            </el-button>
          </div>
        </div>
      </div>
    </el-card>
    <el-card shadow="hover"
             class="mt15"
    >
      <el-table :data="tableData"
                stripe
                ref="multipleTable"
                @selection-change="handleSelectionChange"
                style="width: 100%"
      >
        <el-table-column type="selection"
                         width="55"
        >
        </el-table-column>
        <el-table-column prop="name"
                         align="center"
                         label="发布老师姓名"
        >
        </el-table-column>
        <el-table-column prop="avatar"
                         align="center" width="80"
                         label="老师照片"
        >
          <template slot-scope="scope">
            <ImgPreview :src="scope.row.avatar"></ImgPreview>
          </template>
        </el-table-column>

        <el-table-column prop="examName"
                         align="center"
                         label="考试名称"
        >
        </el-table-column>
        <el-table-column prop="rexamavata"
                         align="center" width="80"
                         label="考试封面"
        >
        <template slot-scope="scope">
            <ImgPreview :src="scope.row.examavatar"></ImgPreview>
          </template>
        </el-table-column>
        <el-table-column prop="endTime"
                         align="center"
                         label="截止时间"
        >
        </el-table-column>
        <el-table-column
          align="center"
          label="考试状态"
        >
          <template slot-scope="scope">
            <el-button
              class="exam-status-button flip-button"
              size="mini"
              :type="new Date(scope.row.endTime) > new Date() ? 'success' : 'danger'"
              plain
            >
              {{ new Date(scope.row.endTime) > new Date() ? '进行中' : '已结束' }}
            </el-button>
          </template>
        </el-table-column>

        <el-table-column prop="remark"
                         align="center"
                         label="备注"
        >
        </el-table-column>
        <el-table-column fixed="right"
                         align="center"
                         label="操作"
        >
          <template slot-scope="scope">
            <!-- <el-button @click="updateClick(scope.row)"
                       type="text"
                       size="small"
            >编辑
            </el-button> -->
            <el-button type="success" 
                       icon="el-icon-edit"
                       @click="updateClick(scope.row)"
                       size="small"
            >编辑
            </el-button>
            <el-button type="danger" 
                      size="small"
                      icon="el-icon-delete" 
                      @click="delClick(scope.row)"
            >删除
            </el-button>
            <br>
            <br>
            <!-- <el-button @click="showEcharts1(scope.row)"
                       type="text"
                       size="small"
            >考试分析
            </el-button> -->
            <el-button type="primary" 
                       icon="el-icon-share"
                       @click="showEcharts1(scope.row)"
                       size="small"
            >考试分析
            </el-button>
            <!-- <el-button type="text"
                       size="small"
                       @click="delClick(scope.row)"
            >删除
            </el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="total>0"
                  :total="total"
                  :page.sync="listQueryParam.current"
                  :limit.sync="listQueryParam.pageSize"
                  @pagination="getTableDataList"
      />
    </el-card>
    <!-- 添加或修改对话框 -->
    <el-dialog :title="dialogTitle"
               :visible.sync="addOrUpdateDialogVisible"
               width="40%"
               :before-close="handleClose"
    >
      <el-form :model="formData"
               :rules="rules"
               ref="formData"
               label-width="100px"
      >
        <el-form-item label="考试名称"
                      prop="examName"
        >
          <el-input v-model="formData.examName"></el-input>
        </el-form-item>
        <el-form-item label="老师信息" v-if="type == 0"
                      prop="teacherId"
        >
          <el-select v-model="formData.teacherId" clearable placeholder="请选择老师信息">
            <el-option
              v-for="item in teacherIdOptions"
              :key="item.key"
              :label="item.value"
              :value="item.key"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="考试时长" prop="examDuration">
              <el-input 
                v-model="formData.examDuration" 
                style="width: 400px"
                placeholder="请输入考试时长（分钟）">
              </el-input>
              <span style="margin-left: 8px; color: #999;">分钟</span>
          </el-form-item>
            <el-form-item label="考试截止日期" prop="endTime">
              <el-date-picker
                v-model="formData.endTime"
                type="datetime"
                placeholder="选择考试截止日期"
                style="width: 500px">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="考试封面"
                          prop="examavatar"
            >
              <uploadImg v-model="formData.examavatar"></uploadImg>
            </el-form-item>
        <el-form-item label="备注"
                      prop="remark"
        >
          <el-input v-model="formData.remark"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer"
      >
        <el-button @click="addOrUpdateDialogVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm('formData')"
        >确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { getList, insert, update, get, del, getTeacherDate } from '@/api/Exam/index'
import Pagination from '@/components/Pagination'
import { tableUtil } from '@/mixins/table'
import { Message } from 'element-ui'
import uploadImg from '@/components/ImageUpload'
import ImgPreview from '@/components/ImgPreview'

export default {
  mixins: [tableUtil],
  components: {
    Pagination, uploadImg, ImgPreview
  },
  data() {
    return {
      type: localStorage.getItem('examType'),
      listQueryParam: {
        current: 1,
        pageSize: 5
      },
      currentId: 0,
      showEcharts: false,
      formData: {},
      rules: {
        examName: [
          { required: true, message: '请输入考试名称', trigger: 'blur' }
        ],
        teacherId: [
          { required: true, message: '请选择老师信息', trigger: 'change' }
        ],
        endTime: [
          { required: true, message: '请选择考试截止日期', trigger: 'change' }
        ],
        remark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      teacherIdOptions: []
    }
  },
  mounted() {
    this.getTableDataList()
    this.getTeacherDateList()
  },
  methods: {
    showEcharts1(row) {
      this.currentId = row.id
      this.$router.push('/echarts/index/' + this.currentId)
    },
    getTableDataList() {
      if (this.type == 1) {
        this.listQueryParam.teacherId = localStorage.getItem('examId')
      }
      getList(this.listQueryParam).then((res) => {
        this.total = res.data.total
        this.tableData = res.data.records
      })
    },
    updateClick(row) {
      this.dialogTitle = '修改'
      get(row.id).then((res) => {
        this.formData = res.data
        this.addOrUpdateDialogVisible = true
      })
    },
    delByIds(ids) {
      del(ids).then((res) => {
        Message.success('删除成功')
        this.getTableDataList()
      })
    },
    saveData() {
      if (this.type == 1) {
        this.formData.teacherId = localStorage.getItem('examId')
      }
      // 格式化截止日期和时间
      if (this.formData.endTime) {
        this.formData.endTime = this.formatDate(this.formData.endTime)
      }
      if (this.formData.id) {
        update(this.formData).then((res) => {
          Message.success('修改成功')
          this.addOrUpdateDialogVisible = false
          this.getTableDataList()
        })
      } else {
        insert(this.formData).then((res) => {
          Message.success('添加成功')
          this.addOrUpdateDialogVisible = false
          this.getTableDataList()
        })
      }
    },
    formatDate(date) {
      if (!date) return ''
      const d = new Date(date)
      const year = d.getFullYear()
      const month = String(d.getMonth() + 1).padStart(2, '0')
      const day = String(d.getDate()).padStart(2, '0')
      const hours = String(d.getHours()).padStart(2, '0')
      const minutes = String(d.getMinutes()).padStart(2, '0')
      const seconds = String(d.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    },
    getTeacherDateList() {
      getTeacherDate().then(res => {
        this.teacherIdOptions = res.data
      })
    }
  }
}
</script>
<style>
.exam-status-button {
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 5px 15px;
  font-size: 14px;
  color: #666;
  background-color: #f5f5f5;
  transition: background-color 0.3s, color 0.3s;
}

.exam-status-button:hover {
  background-color: #e0e0e0;
}

.exam-status-button.success {
  color: #ffffff;
  background-color: #67c23a;
  border-color: #67c23a;
}

.exam-status-button.success:hover {
  background-color: #56b338;
  border-color: #56b338;
}

.exam-status-button.danger {
  color: #ffffff;
  background-color: #f56c6c;
  border-color: #f56c6c;
}

.exam-status-button.danger:hover {
  background-color: #e64949;
  border-color: #e64949;
}

/* 动画效果 */
@keyframes flip {
  0% {
    transform: rotateY(0deg);
  }
  50% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}

.flip-button {
  animation: flip 1s forwards;
}

</style>
